<!-- 学员详情 -->
<template>
  <div class="studentDetailInfo" style="padding: 10px;">
    <el-card class="card">
      <!-- 编辑按钮 -->
      <div class="top_nav" v-if="pageType === 'details'">
        <div>
          <p @click="edit">
            <i class="iconfont icon-bianji1"></i>
            编辑
          </p>
        </div>
      </div>
      <!-- 顶部头像信息|关闭保存按钮 -->
      <div class="header_info">
        <div class="header_info_img">
          <el-upload
            v-if="pageType === 'details' ? false : true"
            :class="{ 'avatar-uploader': !imageUrl }"
            style="height: 40px;"
            :action="uploadFileURL"
            accept="image/jpeg,image/gif,image/png"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <img v-if="pageType !== 'edit'" :src="imageUrl" />
        </div>
        <div class="header_info_config" style="padding-left: 14px;">
          <p>学员名称</p>
          <p>{{ formData.name }}</p>
        </div>
        <div
          class="save_info"
          v-if="pageType === 'edit' || pageType === 'create'"
        >
          <p @click="handleSubmit('studentBasis')">
            <i class="iconfont icon-baocun"></i>
            保存
          </p>
          <p @click="goBack()">
            <i class="iconfont icon-close"></i>
            关闭
          </p>
        </div>
      </div>
    </el-card>
    <div class="empty"></div>
    <!-- 详情页面 -->
    <el-card class="tab" v-if="pageType === 'details'">
      <el-form ref="form" :model="formData" :rules="rules" label-width="150px">
        <p class="basic_title">基本信息</p>
        <div class="basic_content">
          <el-form-item label="学员编号：" prop="sno">
            <el-input
              v-model="formData.sno"
              style="width: 218px;"
              placeholder="请填写学员编号"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="姓名：" prop="name">
            <el-input
              v-model="formData.name"
              style="width: 218px;"
              placeholder="请填写姓名"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="英文名称：" prop="enname">
            <el-input
              v-model="formData.enname"
              style="width: 218px;"
              placeholder="请填写英文名称"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="联系电话：" prop="mobile">
            <el-input
              v-model="formData.mobile"
              style="width: 218px;"
              placeholder="请填写联系电话"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="邮箱：" prop="email">
            <el-input
              v-model="formData.email"
              style="width: 218px;"
              placeholder="请填写邮箱"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="性别：" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别" disabled>
              <el-option
                v-for="item in sexData"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始日期：" prop="start_date">
            <el-date-picker
              v-model="formData.start_date"
              type="date"
              placeholder="请选择开始日期"
              :picker-options="pickerOptionsStart"
              disabled
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="结束日期：" prop="end_date">
            <el-date-picker
              v-model="formData.end_date"
              type="date"
              placeholder="请选择结束日期"
              :picker-options="pickerOptionsEnd"
              disabled
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="测试级别：" prop="pt_level">
            <el-input
              v-model="formData.pt_level"
              style="width: 218px;"
              placeholder="请输入测试级别"
              disabled
            ></el-input>
          </el-form-item>

          <el-form-item label="初始级别：" prop="initial_level" disabled>
            <el-select
              v-model="formData.initial_level"
              placeholder="请选择初始级别"
              @change="changeStartLevel"
              disabled
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目标级别：" prop="target_level">
            <el-select
              v-model="formData.target_level"
              placeholder="请选择目标级别"
              @change="changeEndLevel"
              disabled
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="学员类型：" prop="degree_id">
            <el-select
              v-model="formData.degree_id"
              placeholder="请选择学员类型"
              @change="degreeChange"
              disabled
            >
              <el-option
                v-for="item in degree"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择班级：" prop="classroom_id">
            <el-select
              v-model="formData.classroom_id"
              placeholder="请选择班级"
              disabled
            >
              <el-option
                v-for="item in classRoom"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <p class="basic_title">备注</p>
        <el-form-item>
          <div class="basic_content" v-text="formData.remark"></div>
        </el-form-item>
      </el-form>
      <div>
        <p class="basic_title" style="margin-bottom: 30px;">学习情况</p>
        <div class="clock">
          <div class="clock_left">
            <img :src="imageUrl" class="clock_img" />
            <div class="clock_left_header"></div>
            <div class="clock_left_content">
              <p style="color: #333333; font-size: 18px; margin-bottom: 10px;">
                学员名称：
              </p>
              <p style="color: #999; font-size: 18px; margin-bottom: 28px;">
                {{ formData.name }}
              </p>
              <div class="lines"></div>
              <div class="clock_left_content_center">
                <div>
                  <span style="color: #f25e51;"
                    >{{ this.clockin.count || 0 }}次</span
                  >
                  <p style="color: #999; font-size: 12px">
                    累计打卡次数
                  </p>
                  <!-- <el-progress :stroke-width="8" :percentage="63"></el-progress> -->
                </div>
                <div>
                  <span style="color: #f25e51;"
                    >{{ this.clockin.record_count || 0 }}天</span
                  >
                  <p style="color: #999; font-size: 12px">
                    累计学习天数
                  </p>
                  <!-- <el-progress :stroke-width="8" :percentage="63"></el-progress> -->
                </div>
                <div>
                  <span style="color: #f25e51;"
                    >{{ this.clockin.durations || 0 }}</span
                  >
                  <p style="color: #999; font-size: 12px">
                    学习课件时长
                  </p>
                  <!-- <el-progress :stroke-width="8" :percentage="45"></el-progress> -->
                </div>
              </div>
              <div class="lines"></div>
              <p style="font-size: 16px; margin-top: 30px;">
                课程有效学习期：{{ formData.start_date }}~{{
                  formData.end_date
                }}
              </p>
            </div>
          </div>
          <div class="clock_mid">
            <el-calendar>
              <template slot-scope="{ date, data }" slot="dateCell">
                <p>
                  {{
                    data.day
                      .split("-")
                      .slice(2)
                      .join("-")
                  }}
                </p>
                <p style="font-size: 8px; color: red;">
                  {{ dealMyDate(data.day) }}
                </p>
              </template>
            </el-calendar>
          </div>
          <div class="clock_right">
            <h4>学习时长对比</h4>
            <div id="durationEcharts" style="width: 100%; height: 300px;"></div>
          </div>
        </div>
      </div>
    </el-card>
    <!-- 编辑页面 -->
    <el-card class="tab" v-if="pageType === 'edit' || pageType === 'create'">
      <el-form ref="form" :model="formData" :rules="rules" label-width="150px">
        <p class="basic_title">基本信息</p>
        <div class="basic_content">
          <!-- <el-form-item label="学员编号：" prop="sno">
            <el-input
              v-model="formData.sno"
              style="width: 218px;"
              placeholder="请填写学员编号"
              :disabled="true"
            ></el-input>
          </el-form-item> -->

          <el-form-item label="姓名：" prop="name">
            <el-input
              v-model="formData.name"
              style="width: 218px;"
              placeholder="请填写姓名"
            ></el-input>
          </el-form-item>

          <el-form-item label="英文名称：" prop="enname">
            <el-input
              v-model="formData.enname"
              style="width: 218px;"
              placeholder="请填写英文名称"
            ></el-input>
          </el-form-item>

          <el-form-item label="联系电话：" prop="mobile">
            <el-input
              v-model="formData.mobile"
              style="width: 218px;"
              placeholder="请填写联系电话"
              @blur="validateMobile"
            ></el-input>
          </el-form-item>

          <el-form-item label="邮箱：" prop="email">
            <el-input
              :disabled="pageType === 'edit' ? true : false"
              v-model="formData.email"
              style="width: 218px;"
              placeholder="请填写邮箱"
              @change="validateEPT(formData.email)"
            ></el-input>
          </el-form-item>

          <el-form-item label="性别：" prop="sex">
            <el-select v-model="formData.sex" placeholder="请选择性别">
              <el-option
                v-for="item in sexData"
                :key="item.value"
                :label="item.label"
                :value="parseInt(item.value)"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="开始日期：" prop="start_date">
            <el-date-picker
              v-model="formData.start_date"
              type="date"
              placeholder="请选择开始日期"
              :picker-options="pickerOptionsStart"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="结束日期：" prop="end_date">
            <el-date-picker
              v-model="formData.end_date"
              type="date"
              placeholder="请选择结束日期"
              :picker-options="pickerOptionsEnd"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="测试级别：" prop="pt_level">
            <el-input
              v-model="formData.pt_level"
              style="width: 218px;"
              placeholder="请输入测试级别"
              :disabled="true"
            ></el-input>
          </el-form-item>

          <el-form-item label="初始级别：" prop="initial_level">
            <el-select
              v-model="formData.initial_level"
              placeholder="请选择初始级别"
              disabled
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="目标级别：" prop="target_level">
            <el-select
              v-model="formData.target_level"
              placeholder="请选择目标级别"
              @change="changeEndLevel"
            >
              <el-option
                v-for="item in levelList"
                :key="item.label.name"
                :label="item.label.name"
                :value="item.label.code"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="学员类型：" prop="degree_id">
            <el-select
              v-model="formData.degree_id"
              placeholder="请选择学员类型"
              @change="degreeChange"
            >
              <el-option
                v-for="item in degree"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="选择班级：" prop="classroom_id">
            <el-select v-model="formData.classroom_id" placeholder="请选择班级">
              <el-option
                v-for="item in classRoom"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <p class="basic_title">备注</p>
        <el-form-item>
          <div class="basic_content" :model="formData.remark">
            <link-editor
              @editor-info="getEditorInfo"
              :editorInfo="formData.remark"
            ></link-editor>
          </div>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import echarts from "echarts";
import { changeTitleMinin, detailsMinin } from "@/mixin";
import { uploadFileURL } from "@/utils/url";
import http from "@/api/student";
import globalApi from "@/api/global";
import { formatArray, formatDate } from "@/utils";
import editor from "@/components/editor";
export default {
  name: "studentDetailInfo",
  mixins: [changeTitleMinin, detailsMinin],
  components: {
    linkEditor: editor
  },
  data() {
    return {
      degreeType: null,
      // 打卡日历数据
      clockMenology: [],
      // 图表数据
      metaDate: [],
      // 周时间数据
      xAxisData: [],
      stat: [],
      clockin: {},
      clockValue: new Date(),
      formData: {
        headimgurl:
          "https://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/vue/images/lan.png",
        target_level: "A2",
        start_date: new Date(),
        end_date: "",
        degree_id: null
      },
      id: "",
      globalApi: globalApi,
      http: http,
      rules: {
        name: [{ required: true, message: "请填写姓名" }],
        enname: [{ required: true, message: "请填写姓名" }],
        mobile: [
          { required: true, message: "请填写手机号" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "手机号填写有误",
            trigger: "blur"
          }
        ],
        email: [
          { required: true, message: "请填写邮箱" },
          {
            pattern: /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
            message: "邮箱填写有误",
            trigger: "blur"
          }
        ],
        sex: [{ required: true, message: "请选择性别" }],
        start_date: [{ required: true, message: "请选开始时间" }],
        end_date: [{ required: true, message: "请选择结束时间" }],
        pt_level: [{ required: true, message: " " }],
        initial_level: [{ required: true, message: " " }],
        target_level: [{ required: true, message: "请选择结束级别" }],
        degree_id: [{ required: true, message: "请选择学员类型" }],
        classroom_id: [{ required: true, message: "请选择班级" }]
      },
      sexList: [
        { label: "男", value: 1 },
        { label: "女", value: 2 }
      ],
      pageType: "",
      uploadFileURL,
      imageUrl:
        "https://gaoxiaocrm.oss-cn-hangzhou.aliyuncs.com/vue/images/lan.png",
      levelList: [],
      degree: [],
      classRoom: [],
      pickerOptionsStart: {
        disabledDate: time => {
          let endDateVal = this.formData.end_date;
          if (endDateVal) {
            return (
              time.getTime() >
              new Date(endDateVal).getTime() - 1 * 24 * 60 * 60 * 1000
            ); // 设置开始时间必须小于结束时间     不能等于
          }
        }
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          let beginDateVal = this.formData.start_date;
          if (beginDateVal) {
            console;
            return (
              time.getTime() <
              new Date(beginDateVal).getTime() + 1 * 24 * 60 * 60 * 1000
            ); // 设置结束时间必须大于开始时间
          }
        }
      }
    };
  },
  methods: {
    // 计算打卡函数
    dealMyDate(v) {
      console.log("vvvvv", v);
      let len = this.clockMenology.length;
      let res = "";
      for (let i = 0; i < len; i++) {
        if (this.clockMenology[i].clockin_date == v) {
          res = "签";
          break;
        }
      }
      return res;
    },
    // 根据学员类型推荐班级
    degreeChange() {
      this.degreeType = this.formData.degree_id;
      this.formData.classroom_id = "";
      this.$forceUpdate();
      this.getClassRoom();
      // if (this.formData.initial_level) {
      //   let params = {};
      //   params.degree_id = this.formData.degree_id;
      //   params.level = this.formData.initial_level;
      //   console.log("params1", params);
      //   globalApi.getClassRoomList(params).then(res => {
      //     this.$set(this.formData, "classroom_id", res.data[0].id);
      //   });
      // } else {
      //   this.$message.error("请先输入邮箱,获取初始级别");
      // }
    },
    // startDateChange(date) {
    //   let d1 = new Date(date);
    //   let d2 = new Date(d1);
    //   d2.setFullYear(d2.getFullYear() + 1);
    //   d2.setDate(d2.getDate() - 1);
    //   this.$set(this.formData, "end_date", d2);
    // },
    goBack() {
      this.$router.go(-1);
    },
    changeStartLevel(val) {
      for (let level of this.levelList) {
        console.log(val, level);
        if (val === level.label.name) {
          this.startLevel = Number(level.label.id);
          if (
            (this.midLevel && this.midLevel < this.startLevel) ||
            (this.endLevel && this.startLevel > this.endLevel)
          ) {
            console.log(this.midLevel < this.startLevel);
            this.$message.warning("目标级别要大于初始级别,最高级别为C1");
            this.formData.target_level = "";
          }
        }
      }
    },
    changeEndLevel(val) {
      for (let level of this.levelList) {
        if (val === level.label.name) {
          this.endLevel = Number(level.label.id);
          if (
            this.endLevel < this.midLevel ||
            this.endLevel < this.startLevel
          ) {
            this.$message.warning("目标级别要大于初始级别,最高级别为C1");
            this.formData.target_level = "";
          }
        }
      }
    },
    getEditorInfo(data) {
      this.formData.remark = data;
    },
    handleAvatarSuccess(res, file) {
      console.log("res, file:", res, file);
      this.formData["headimgurl"] = res.data;
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isPicture =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isPicture) {
        this.$message.error("上传头像图片只能是图片格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isPicture && isLt2M;
    },
    edit() {
      this.pageType = "edit";
    },
    // 验证手机号是否唯一
    async validateMobile() {
      console.log("this.formData.mobile", this.formData.mobile);
      if (this.pageType === "edit") {
        return false;
      }
      if (this.formData.mobile === undefined) {
        return false;
      }
      let data = {};
      data["mobile"] = this.formData["mobile"];
      let valid = await globalApi.verifyCommonUnique(data, "student");
      if (!valid.valid) {
        this.$message.error("该手机号已存在，请更换手机号！");
      }
    },
    // 邮箱改变事件
    async validateEPT(email) {
      if (email === "") {
        this.$set(this.formData, "initial_level", "");
        this.$set(this.formData, "classroom_id", "");
        // this.formData.initial_level = null;
        // this.formData.classroom_id = null;
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
        return false;
      }
      let data = {};
      data["email"] = this.formData["email"];
      let valid = await globalApi.verifyCommonUnique(data, "student");
      // 获取邮箱唯一性验证结果
      if (valid.valid) {
        let params = this.formData.email + "";
        let result = await http.getptResult({ email: params });
        if (result.code === 111) {
          this.$message.error("请先进行EPT测试！");
          this.$set(this.formData, "initial_level", "");
          this.$set(this.formData, "classroom_id", "");
          this.$nextTick(() => {
            this.$refs["form"].clearValidate();
          });
        } else {
          this.$set(this.formData, "initial_level", result.level);
          this.$set(this.formData, "pt_level", result.pt_level);
          let params1 = {};
          params1.degree_id = this.formData.degree_id;
          params1.level = this.formData.initial_level;
          globalApi.getClassRoomList(params1).then(res => {
            if (res.data.length !== 0) {
              this.$set(this.formData, "classroom_id", res.data[0].id);
            }
          });
        }
      } else {
        this.$set(this.formData, "initial_level", "");
        this.$set(this.formData, "classroom_id", "");
        this.$nextTick(() => {
          this.$refs["form"].clearValidate();
        });
        this.$message.error("该邮箱已存在，请更换邮箱！");
      }
    },
    // 验证字段唯一性
    verifyCommonUnique(type) {
      let result;
      let data = {};
      data[type] = this.formData[type];
      globalApi.verifyCommonUnique(data, "student").then(res => {
        // 调用主动验证
        // valid: false 为验证失败，已存在
      });
    },
    getClockin() {
      function p() {}
      let date = new Date(this.clockValue);
      let month = date.getMonth() + 1;
      if (month < 10) {
        month = "0" + month;
      }
      let ym = date.getFullYear() + "-" + month;
      http.getClockin({ user_id: this.id, ym: ym }).then(res => {
        this.clockin = res;
        console.log("res111", res);
        this.stat = res.stat;
        this.clockMenology = res.data;
        var xAxis = [];
        var avgmeta = [];
        var my = [];
        this.stat.map(item => {
          xAxis.push(item.date);
          avgmeta.push(item.avg);
          my.push(item.my);
        });
        this.xAxisData = xAxis;
        this.metaDate.push(avgmeta);
        this.metaDate.push(my);
        this.drawEcharts();
      });
    },
    init() {
      let basicConfig = JSON.parse(sessionStorage.getItem("basicConfig"));
      console.log("basicConfig:", basicConfig);

      this.sexData = formatArray(basicConfig.sex);
      this.levelList = formatArray(basicConfig.user_level);

      if (Object.keys(this.$route.params).length) {
        sessionStorage.setItem(
          "studentInfoParams",
          JSON.stringify(this.$route.params)
        );
      }

      let pageParams = sessionStorage.getItem("studentInfoParams");
      if (pageParams) {
        pageParams = JSON.parse(pageParams);
        this.id = pageParams.id;
        this.pageType = pageParams.pageType;
        this.degreeType = pageParams.degreeType;
        this.$set(this.formData, "degree_id", pageParams.degreeType);
      }
      if (this.pageType === "edit" || this.pageType === "details") {
        http.getContentDetail({ id: this.id }).then(res => {
          console.log("res", res);
          if (res.data.degree_id === 0) {
            res.data.degree_id = "";
          }
          this.formData = res.data;
          this.imageUrl = res.data.headimgurl;
        });
      }

      if (this.pageType === "details") {
        this.getClockin();
      }

      globalApi.getDegreeList().then(res => {
        this.degree = res.data;
      });

      // 设置结束时间
      let d1 = new Date(this.formData.start_date);
      let d2 = new Date(d1);
      d2.setFullYear(d2.getFullYear() + 1);
      d2.setDate(d2.getDate() - 1);
      this.$set(this.formData, "end_date", d2);
    },
    getClassRoom() {
      globalApi.getClassRoomList({ degree_id: this.degreeType }).then(res => {
        this.classRoom = res.data;
      });
      this.$forceUpdate();
    },
    drawEcharts() {
      // x周时间数据
      var xAxisData = this.xAxisData;
      var legendData = ["平均学习时长", "我的学习时长"];
      var title = "";
      var serieData = [];
      // 图表数据 内放数组
      var metaDate = this.metaDate;
      for (var v = 0; v < legendData.length; v++) {
        var serie = {
          name: legendData[v],
          type: "line",
          symbol: "circle",
          symbolSize: 10,
          data: metaDate[v]
        };
        serieData.push(serie);
      }
      var colors = ["#25a7ec", "#f36a5c"];
      let option = {
        backgroundColor: "#fff",
        title: {
          text: title,
          textAlign: "left",
          textStyle: { color: "#333", fontSize: "16", fontWeight: "normal" }
        },
        legend: {
          show: true,
          left: "right",
          data: legendData,
          y: "1%",
          itemWidth: 18,
          itemHeight: 12,
          textStyle: { color: "#333", fontSize: 14 }
        },
        color: colors,
        grid: {
          left: "2%",
          top: "12%",
          bottom: "5%",
          right: "5%",
          containLabel: true
        },
        tooltip: { trigger: "axis", axisPointer: { type: "shadow" } },
        xAxis: [
          {
            type: "category",
            axisLine: { show: true, lineStyle: { color: "#333" } },
            axisLabel: {
              interval: 0,
              rotate: 45,
              textStyle: { color: "#000", fontSize: 10 }
              // formatter: function(value) {
              //   //x轴的文字改为竖版显示
              //   var str = value.split("");
              //   return str.join("\n");
              // }
            },
            axisTick: { show: false },
            data: xAxisData
          }
        ],
        yAxis: [
          {
            name: "时长(min)",
            axisTick: { show: false },
            splitLine: { show: false },
            axisLabel: { textStyle: { color: "#333", fontSize: 14 } },
            axisLine: { show: true, lineStyle: { color: "#333" } }
          }
        ],
        series: serieData
      };
      this.$echartsFn.draweharts("durationEcharts", option);
    }
  },
  created() {
    this.init();
    this.getClassRoom();
  }
};
</script>

<style lang="scss" scoped>
.studentDetailInfo {
  .card /deep/.el-card__body {
    padding: 0;
  }
  .top_nav {
    padding-left: 34px;
    div {
      display: flex;
      padding: 25px 0;
      p {
        margin-right: 20px;
        color: #565656;
        font-size: 16px;
        cursor: pointer;
        &:hover {
          color: #1796eb;
        }
      }
    }
  }
  .line {
    height: 1px;
    width: 100%;
    background: #bfbfbf;
  }
  .header_info {
    position: relative;
    padding: 26px 0 45px 34px;
    display: flex;
    &_img {
      width: 47px;
      height: 47px;
      overflow: hidden;
      border-radius: 50%;
      img {
        width: 47px;
        height: 47px;
      }
    }
    &_config {
      padding-left: 26px;
      padding-right: 26px;
      // border-right: 1px solid #bfbfbf;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      &:last-of-type {
        border-right: none;
      }
      p {
        &:nth-of-type(1) {
          font-size: 14px;
          color: #565656;
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
          font-weight: 600;
        }
      }
    }
    .save_info {
      display: flex;
      position: absolute;
      right: 40px;
      top: 36px;
      p {
        margin-left: 20px;
        border-radius: 5px;
        cursor: pointer;
        &:nth-of-type(1) {
          color: #1799eb;
          padding: 9px 22px;
          background: #e5f4ff;
        }
        &:nth-of-type(2) {
          color: #1799eb;
          padding: 9px 22px;
          background: #e5f4ff;
        }
      }
    }
  }
  .empty {
    width: 100%;
    height: 10px;
    background: #ebebeb;
  }
  .tab {
    padding: 0 34px;
    .config_num {
      display: flex;
      margin-bottom: 36px;
      p {
        padding: 8px 16px;
        border-radius: 5px;
        background: #ebf7ff;
        font-size: 14px;
        color: #72777a;
        margin-right: 12px;
        span {
          color: #6eb8f0;
        }
        // &:last-of-type {
        //     background: none;
        //     color: #6EB8F0;
        //     cursor: pointer;
        // }
      }
    }
    .info_title {
      display: flex;
      margin-bottom: 16px;
      position: relative;
      & > p {
        line-height: 36px;
        color: #999999;
        font-size: 18px;
        &:nth-of-type(1) {
          width: 36px;
          height: 36px;
          border-radius: 10px;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 10px;
          i {
            font-size: 20px;
            color: white;
          }
        }
      }
      div {
        position: absolute;
        right: 55px;
        display: flex;
        p {
          line-height: 36px;
          margin-left: 24px;
          cursor: pointer;
          i {
            font-size: 24px;
          }
        }
      }
    }
    .title_config {
      margin-bottom: 54px;
      ul {
        line-height: 47px;
        display: flex;
        list-style: none;
        padding-left: 47px;
        &:nth-of-type(1) {
          background: #f5f5f5;
          font-size: 16px;
          color: #333;
          font-weight: 600;
        }
        li {
          text-align: left;
          font-size: 14px;
          color: #565656;
          &:last-of-type {
            text-align: right;
            padding-right: 45px;
          }
        }
      }
    }
    .basic_title {
      width: 100%;
      line-height: 41px;
      background: #f5f5f5;
      padding-left: 24px;
      color: #333;
      font-size: 20px;
      font-weight: 600;
    }
    .basic_content {
      padding: 40px 0 44px 60px;
      padding-top: 40px;
      display: flex;
      flex-wrap: wrap;
      /deep/ .el-form-item {
        // width: 25%;
        font-weight: 600;
      }
      li {
        width: 25%;
        list-style: none;
        line-height: 45px;
        font-weight: 600;
        span {
          font-weight: 400;
        }
      }
    }
    .clock {
      display: flex;
      justify-content: space-between;
      &_left {
        box-shadow: 0px 0px 10px rgba(153, 153, 153, 0.5);
        height: 430px;
        width: 30%;
        border-radius: 10px;
        position: relative;
        &_header {
          height: 100px;
          background: linear-gradient(to right, #f27350, #f25751);
          border-top-left-radius: 10px;
          border-top-right-radius: 10px;
        }
        &_content {
          padding-top: 80px;
          display: flex;
          flex-direction: column;
          // justify-content: center;
          align-items: center;
          .lines {
            width: 90%;
            height: 2px;
            background-color: #ccc;
          }
          &_center {
            display: flex;
            width: 100%;
            justify-content: space-around;
            align-items: center;
            padding: 25px 0;
            div {
              display: flex;
              flex-flow: column;
              justify-content: center;
              align-items: center;
            }
          }
          // div {
          //   display: flex;
          //   width: 80%;
          //   align-items: center;
          //   &:nth-of-type(1) {
          //     p {
          //       width: 190px;
          //     }
          //   }
          //   &:nth-of-type(2) {
          //     p {
          //       width: 280px;
          //     }
          //   }
          // }
        }
        .clock_img {
          position: absolute;
          left: 50%;
          top: 50px;
          transform: translate(-50%, 0);
          width: 100px;
          height: 100px;
          border-radius: 50%;
        }
      }
      &_mid {
        box-shadow: 0px 0px 10px rgba(153, 153, 153, 0.5);
        width: 30%;
        border-radius: 10px;
        height: 430px;
        display: flex;
        justify-content: center;
        align-items: center;
        overflow: hidden;
        /deep/ .el-calendar-day {
          height: 45px;
        }
        /deep/ .el-calendar__title {
          font-size: 14px;
        }
        /deep/ .el-button--mini {
          padding: 5px 10px;
        }
      }
      &_right {
        box-shadow: 0px 0px 10px rgba(153, 153, 153, 0.5);
        width: 33%;
        border-radius: 10px;
        height: 430px;
        margin-right: 5px;
        display: flex;
        flex-flow: column;
        h4 {
          align-self: center;
          margin-top: 20px;
        }
        div {
          margin-top: 25px;
        }
      }
    }
  }
  .create_chance {
    .business_pic {
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      img {
        width: 191px;
        height: 171px;
      }
    }
    .btn {
      margin-top: 30px;
      width: 100%;
      display: flex;
      justify-content: center;
      /deep/ .el-button {
        width: 214px;
      }
    }
  }

  .latent_modal {
    .content {
      display: flex;
      flex-direction: column;
      align-items: center;
      .search_teacher {
        /deep/ .el-input {
          width: 440px;
        }
      }
      .radio {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        max-height: 120px;
        overflow-y: auto;
        div {
          width: 50%;
          height: 40px;
          display: flex;
          align-items: center;
        }
      }
      .check {
        .teacher_checkbox_group {
          display: flex;
          flex-wrap: wrap;
          width: 100%;
          max-height: 120px;
          overflow-y: auto;
          /deep/ .el-checkbox {
            margin-right: 0;
          }
          .teacher_checkbox {
            width: 50%;
            height: 40px;
            display: flex;
            align-items: center;
          }
        }
      }
      p {
        &:nth-of-type(1) {
          width: 92px;
          height: 92px;
          border-radius: 50%;
          background: linear-gradient(to bottom, #f25851, #f27350);
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 18px;
          i {
            font-size: 40px;
            color: white;
          }
        }
        &:nth-of-type(2) {
          font-size: 20px;
          color: #333;
        }
        &:nth-of-type(3) {
          font-size: 14px;
          color: #999;
          margin-top: 7px;
        }
      }
    }
  }
  .follow_customer {
    display: flex;
    width: 100%;
    .follow_form {
      width: 100%;
      /deep/ .el-upload-list {
        display: flex;
        li {
          width: 20%;
          margin-right: 10px;
          .el-upload-list__item-name {
            display: none;
          }
        }
      }
      .el-textarea {
        width: 491px;
      }
      .el-input {
        width: 179px;
      }
      .el-select {
        width: 179px;
      }
    }
  }
  .btn {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
    /deep/ .el-button {
      width: 214px;
    }
  }
}
</style>
